<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html {
				font-size: 15px;
			}

			body {
				background-color: #222;
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
			}

			h1 {
				color: #333;
				font-family: Helvetica;
				margin: 0;
				padding: 0;
				font-size: 8rem;
				letter-spacing: -0.3rem;
				position: relative;
			}

			h1::after {
				content: attr(data-spotlight);
				color: transparent;
				position: absolute;
				top: 0;
				left: 0;
				-webkit-clip-path: ellipse(100px 100px at 0% 50%);
				clip-path: ellipse(100px 100px at 0% 50%);
				animation: spotlight 5s infinite;
				background-image: url(https://images.unsplash.com/photo-1579547621869-0ddb5f237392?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);
				background-size: 150%;
				background-position: center center;
				-webkit-background-clip: text;
				background-clip: text;
			}

			@keyframes spotlight {
				0% {
					-webkit-clip-path: ellipse(100px 100px at 0% 50%);
					clip-path: ellipse(100px 100px at 0% 50%);
				}

				50% {
					-webkit-clip-path: ellipse(100px 100px at 100% 50%);
					clip-path: ellipse(100px 100px at 100% 50%);
				}

				100% {
					-webkit-clip-path: ellipse(100px 100px at 0% 50%);
					clip-path: ellipse(100px 100px at 0% 50%);
				}
			}
		</style>
	</head>
	<body>
		<h1 data-spotlight="CodingStartup!">CherieLin</h1>
	</body>
</html>
